<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--事件源：-->
    <button onclick="alert('hello world')">点击1</button>
    <!--事件监听：绑定事件、触发事件
        1.HTML属性中提供了on+事件类型:耦合性高，代码复用率低
        2.Domo绑定事件：对象.属性（on+事件类型）=事件处理函数
        3.Dom2绑定事件：对象.方法()；
    !-->
    <button class="ck" >点击2</button>
<script>
    //获取节点
    const btn=document.querySelector('.ck');
    //对象.属性=事件处理程序（函数）；
    btn.onclick=function(){
        alert('hello btn2');
    };
    btn.onclick=null;  //移出事件
</script>
<button id="btn">点击3</button>
<script>
    const ck=document.querySelector('#btn');
    //添加事件监听（函数）addEventListener('事件类型'，'事件处理函数'，[true/false]);
    //事件类型不需要前缀on
     ck.addEventListener('click',function(){
         alert('hello btn3');
     });
    let test=function(){
        alert('hello btn3');
    }
    ck.addEventListener('click',test);
    ck.removeEventListener('click',test);
</script>
</body>
</html>